<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from 'vue-router'
const router = useRouter()
let show = ref(true);
let kg=ref(false);
let itme = 10;
let it=3
let timeId = null;
let m=ref(true);

const sm=()=>{
  m.value=false;
}

onMounted(() => {
  timeId = setInterval(() => {
    if (itme > 0) {
      itme--;
      if(itme==0){
        kg.value=true;
      }
    }
  }, 1000);
});

// 组件卸载前清除定时器，避免内存泄漏
onBeforeUnmount(() => {
  if (timeId) {
    clearInterval(timeId);
  }
});
import { showToast } from 'vant';
const del = () => {
  show.value = !show.value;
  showToast('支付失败');
  timeId = setInterval(() => {
    if (it > 0) {
      it--;
      if(it==0){
          router.push('/sjq')
      }
    }
  }, 1000);
};

// 使用支付宝支付
const zhi=()=>{
  router.push('/banners')
}
</script>

<template>
    <van-nav-bar title="收银台" left-arrow @click-left="$router.back()">
    <template #right>
      <van-icon name="weapp-nav" size="18" />
    </template>
  </van-nav-bar>
  <div class="box" v-if="show">
    <div class="zz" v-if="kg">
      <div class="com">
        <div class="del">
          <span></span>
          <van-icon @click="del" name="cross" />
        </div>
        <div class="yuan"><van-icon color="#fff" size="1rem" name="fail" /></div>
        <div class="title" style="padding: 0 10px; margin-top: 30px">
          当前停留时间过长，订单已关闭，请重新发起支付。
        </div>
        <span class="se1" @click="del">我知道了</span>
      </div>
    </div>
    <div class="zz" v-else>
      <div class="com" v-if="m">
        <div class="del"><span></span><van-icon @click="del" name="cross" /></div>
        <div class="log"><van-icon color="#ccc" size="1rem" name="wechat-pay" /></div>
        <div class="title">订单支付</div>
        <div class="but">
          <van-button style="width: 60%" color="#07c160" type="primary" size="normal"
          @click="zhi"
            >使用支付宝支付</van-button
          >
        </div>
        <span class="se" @click="sm">二维码支付</span>
      </div>
      <div class="com" v-else>
        <div class="del"><span></span><van-icon @click="del" name="cross" /></div>
        <div class="title1">使用手机微信扫码支付</div>
        <img style="width: 75%;height: 70%;margin-left: 12.5%;" src="./zf.png" alt="">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 667px;
  font-size: 0.35rem;

  .zz {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;

    .com {
      width: 90%;
      height: 50%;
      background-color: #fff;
      position: absolute;
      top: 25%;
      left: 5%;
      border-radius: 10px;

      .del {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        align-items: center;
      }

      .log {
        width: 100%;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 10px;
      }

      .title {
        width: 100%;
        text-align: center;
        font-size: 0.4rem;
        margin-bottom: 40px;
      }

      .title1 {
        width: 100%;
        text-align: center;
        font-size: 0.4rem;
        margin-bottom: 10px;
      }

      .but {
        width: 100%;
        text-align: center;
      }

      .se {
        float: left;
        color: rgb(60, 85, 108);
        font-size: 0.3rem;
        width: 100%;
        text-align: center;
        margin-top: 40px;
      }

      .yuan {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #fa9d3b;
        text-align: center;
        line-height: 50px;
        margin-left: 143.5px;
        margin-top: 50px;
      }

      .se1 {
        float: left;
        color: rgb(60, 85, 108);
        font-size: 0.3rem;
        width: 100%;
        text-align: center;
        margin-top: 20px;
      }
    }
  }
}
</style>
